<template>
  <div class="default_reply">
    <h3>设置开启条件</h3>
    <el-form :model="termForm" label-width="100px">
      <el-form-item label="分时段开启">
        <el-time-select
          placeholder="起始时间"
          v-model="termForm.start"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '23:30'
          }">
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="termForm.end"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '24:00',
            minTime: termForm.start
          }">
        </el-time-select>
      </el-form-item>
      <el-form-item label="周几生效">
        <el-checkbox v-model="termForm.mon" :true-label="1" :false-label="0">一</el-checkbox>
        <el-checkbox v-model="termForm.tue" :true-label="1" :false-label="0">二</el-checkbox>
        <el-checkbox v-model="termForm.wed" :true-label="1" :false-label="0">三</el-checkbox>
        <el-checkbox v-model="termForm.thu" :true-label="1" :false-label="0">四</el-checkbox>
        <el-checkbox v-model="termForm.fri" :true-label="1" :false-label="0">五</el-checkbox>
        <el-checkbox v-model="termForm.sat" :true-label="1" :false-label="0">六</el-checkbox>
        <el-checkbox v-model="termForm.sun" :true-label="1" :false-label="0">七</el-checkbox>
      </el-form-item>
      <el-form-item label="不重复回复">
        <el-col :span="2"><el-input v-model="termForm.intervalTime"></el-input></el-col>
        <el-col :span="10">&emsp;秒内只答复一次</el-col>
      </el-form-item>
    </el-form>
    <h3>设置回复内容</h3>
    <el-input type="textarea" v-model="termForm.message"></el-input>
    <div class="btnWrap">
      <el-button @click="handleSave" type="primary">保存</el-button>
      <el-checkbox v-model="termForm.status" :true-label="1" :false-label="0" @change="handleChangeStatus">启用</el-checkbox>
    </div>
  </div>
</template>
<script>
  import {mapMutations, mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        appid: this.$route.params.appid,
        termForm: {
          type: 1,
          message: '',
          status: 1,
          end: null,
          start: null,
          intervalTime: null,
          mon: 0,
          tue: 0,
          wed: 0,
          thu: 0,
          fri: 0,
          sat: 0,
          sun: 0
        }
      }
    },
    mounted () {
      this.getDefaultReply(this.appid)
    },
    watch: {
      defaultReply (obj) {
        Object.assign(this.termForm, obj)
        this.type = obj.type
        this.message = obj.message
      }
    },
    computed: {
      ...mapState('weiboManage', {
        defaultReply: state => state.defaultReply
      })
    },
    methods: {
      ...mapMutations('weiboManage', ['UPDATE_DEFAULT_REPLY']),
      ...mapActions('weiboManage', ['getDefaultReply', 'setDefaultReply', 'setDefReplyStatus']),
      // 保存
      async handleSave () {
        const res = await this.setDefaultReply({
          ...this.termForm,
          endTime: this.termForm.end,
          startTime: this.termForm.start,
          appid: this.appid
        })
        res.data.code === 1 && this.$message.success('保存成功')
      },
      // 是否启用
      handleChangeStatus (status) {
        this.setDefReplyStatus({
          appid: this.appid,
          status: this.termForm.status
        })
      }
    }
  }
</script>
<style lang="scss">
  .default_reply{
    h3{margin-bottom:20px;}
    .el-textarea{margin-bottom:20px;}
    .btnWrap .el-button{margin-right:10px;}
  }
</style>
